<template>
  <div id="app" class="ordering">
    <!-- 导航栏 -->
    <nav class="bg-gray-900 text-white p-4">
      <div class="container mx-auto flex justify-between items-center">
        <h1 class="text-2xl font-bold">华佗</h1>
      </div>
    </nav>

   <!-- 首页英雄部分 -->
<section class="bg-cover bg-center py-32" style="background-image: url('https://picsum.photos/1920/1080');">
      <div class="container mx-auto text-center text-white">
        <h2 class="text-4xl font-bold mb-4">华佗 - 外科圣手，医学传奇</h2>
        <p class="text-lg mb-8">他以精湛的医术和创新的理念，为古代医学的发展做出了卓越贡献。</p>
   <router-link 
  to="/huatuo" 
  class="bg-green-500 hover:bg-green-600 text-white py-3 px-6 rounded-lg text-lg font-medium transition-colors"
>
  了解更多
</router-link>
  </div>
</section>

    <!-- 生平事迹部分 -->
    <section class="container mx-auto py-16">
      <h2 class="text-3xl font-bold text-center mb-8">生平事迹</h2>
      <div class="flex flex-wrap justify-center gap-8">
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white shadow-md rounded p-6">
            <h3 class="text-xl font-bold mb-2">早年求学</h3>
            <p>华佗年轻时游学于沛国、彭城等地，通晓数经，博学多才。他立志从医，拜名师学习医术，广泛涉猎各种医学典籍和实践知识，为日后的医学成就打下了坚实基础。</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white shadow-md rounded p-6">
            <h3 class="text-xl font-bold mb-2">行医四方</h3>
            <p>学成之后，华佗开始云游四方，足迹遍布多个地区。他凭借高超的医术，为百姓解除病痛，无论是内科、外科、妇科还是儿科，都有深厚的造诣，深受人们的尊敬和爱戴。</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white shadow-md rounded p-6">
            <h3 class="text-xl font-bold mb-2">与曹操的故事</h3>
            <p>因医术声名远扬，华佗被曹操征召。曹操患有头风病，华佗为其诊治。然而，由于华佗不愿只为曹操一人服务，且其治疗方案与曹操的意愿产生冲突，最终被曹操下狱拷问致死，一代名医就此陨落。</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 医学成就部分 -->
    <section class="bg-gray-100 py-16">
      <div class="container mx-auto text-center">
        <h2 class="text-3xl font-bold mb-8">医学成就</h2>
        <div class="flex flex-wrap justify-center gap-8">
          <div class="w-full md:w-1/2 lg:w-1/3 p-4">
            <div class="bg-white shadow-md rounded p-6">
              <img src="https://pic.rmb.bdstatic.com/bjh/250214/dump/9d22eecf1d3422ee22286198553a5fdc.jpeg?x-bce-process=image/auto-orient,o_1/resize,w_1242,limit_1/quality,Q_86/format,f_auto" alt="麻醉相关图片" class="w-full h-32 object-cover mb-4">
              <h3 class="text-xl font-bold mb-2">麻沸散的发明</h3>
              <p>华佗发明的麻沸散是世界上最早的麻醉剂，它的出现使得外科手术得以顺利进行，极大地减轻了病人的痛苦，为医学史上的一大创举，对后世外科手术的发展产生了深远影响。</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/3 p-4">
            <div class="bg-white shadow-md rounded p-6">
              <img src="https://img1.baidu.com/it/u=814526714,2180508391&fm=253&fmt=auto&app=138&f=JPEG?w=608&h=432" alt="锻炼相关图片" class="w-full h-32 object-cover mb-4">
              <h3 class="text-xl font-bold mb-2">五禽戏的创编</h3>
              <p>华佗创编的五禽戏，模仿虎、鹿、熊、猿、鸟五种动物的动作，是一种强身健体的养生功法。通过练习五禽戏，人们可以增强体质，预防疾病，对后世的保健养生和运动医学产生了重要的启示。</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/3 p-4">
            <div class="bg-white shadow-md rounded p-6">
              <img src="https://pic.rmb.bdstatic.com/bjh/news/189f7e76b48496d9b3f06bdbd1463fcb.jpeg?x-bce-process=image/auto-orient,o_1/resize,w_1242,limit_1/quality,Q_86/format,f_auto" alt="医学书籍相关图片" class="w-full h-32 object-cover mb-4">
              <h3 class="text-xl font-bold mb-2">丰富的医学著作</h3>
              <p>华佗一生著有多种医学著作，如《青囊经》等，虽然大部分著作因种种原因失传，但从留存的部分内容中，仍能窥见他的医学智慧和精湛医术，为后世医学研究提供了宝贵的资料。</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 影响与传承部分 -->
    <section class="container mx-auto py-16">
      <h2 class="text-3xl font-bold text-center mb-8">影响与传承</h2>
      <p class="text-lg mb-8">华佗的医学成就和创新精神对中国乃至世界医学的发展都产生了深远的影响。他的麻醉技术、外科手术理念以及养生方法，被后世医家不断研究和传承。许多医学典籍中都记载了他的事迹和医术，成为了中华民族医学宝库中的璀璨明珠。</p>
      <div class="flex justify-center">
        <img src="https://img2.baidu.com/it/u=286212113,3138577785&fm=253&fmt=auto&app=120&f=JPEG?w=475&h=337" alt="传统医学相关图片" class="w-1/2 md:w-1/3 lg:w-1/4 my-8">
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white py-8">
      <div class="container mx-auto text-center">
        <p>&copy; 关于华佗的网页</p>
      </div>
    </footer>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
  data() {
    return {};
  }
});
</script>

<style scoped>
#app .container {
  max-width: 1200px;
  margin: 0 auto;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

section {
  padding: 16px 0;
}

footer {
  text-align: center;
}

/* 图片样式 */
img {
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>